<template>
  <div class="title">快捷方式</div>
  <div class="shortcuts">
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="box">
          数据模块
        </div>
      </el-col>
      <el-col :span="6">
        <div class="box">
          用户管理
        </div>
      </el-col>
      <el-col :span="6">
        <div class="box">
          房产管理
        </div>
      </el-col>
      <el-col :span="6">
        <div class="box">
          书籍管理
        </div>
      </el-col>
    </el-row>
    <el-row class="el-row2" :gutter="20">
      <el-col :span="6">
        <div class="box">
          数据模块
        </div>
      </el-col>
      <el-col :span="6">
        <div class="box">
          用户管理
        </div>
      </el-col>
      <el-col :span="6">
        <div class="box">
          房产管理
        </div>
      </el-col>
      <el-col :span="6">
        <div class="box">
          设置模块
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { themePinia } from '@/libs/pinia/theme';
import { computed } from 'vue';

const theme=themePinia()

const globalTextColor=computed(()=>theme.GlobalTextColor)
const echartsBoxChildrenBackgroundColor=computed(()=>theme.EchartsBoxChildrenBackgroundColor)
</script>

<style scoped lang="scss">
.title {
  padding: 0.6rem 0;
  margin: 0 0.6rem;
  color: #333;
  font-size: 1.5rem;
  border-bottom: 2px solid #f6f6f6;
}

.shortcuts {
  margin-top: 1.5rem;
  height: 100%;
}

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: v-bind(echartsBoxChildrenBackgroundColor);
  height: 8rem;
  cursor: pointer;
}
.el-row2 {
  margin-top: 1.5rem;
}
</style>
